<template>
	<div>
		<Panle title='文件列表' content="文件存储在本地服务器"></Panle>
		<div class="searchbar">
		  <el-row class="pt20">
		    <el-col :span="12">
		    <el-upload
		     class="upload-demo"
		     :action="actions"
		     multiple
		     :on-success="uploadSuccess"
		     ref="upload"
			 :show-file-list="false"
			 :headers="uploadHeader"
		    >
			<PersButton icon="el-icon-edit" size="mini" @click="add()" perms="system:user:list" type="primary" label="上传图片"></PersButton>
		    </el-upload>
			<el-button size="mini" @click="init()">刷新</el-button>
			<PersButton type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="node:del" label="批量删除" ></PersButton>
		    </el-col>
			<el-col :span="12" style="text-align: right;">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="">
					  <el-select v-model="value" clearable placeholder="请选择存储位置" size="mini">
					     <el-option
					        v-for="item in options"
					        :key="item.value"
					        :label="item.label"
					        :value="item.value">
					      </el-option>
					    </el-select>
					</el-form-item>
				  <el-form-item label="">
				    <el-input v-model="formInline.user" size="mini" placeholder="请输入图片名称"></el-input>
				  </el-form-item>
				  
				  <el-form-item>
				    <el-button type="primary"  size="mini">查询</el-button>
				  </el-form-item>
				</el-form>
			</el-col>
		  </el-row>
		  <el-table
			:data="tableData"
		  style="width: 100%;margin-bottom: 20px;" 
		  row-key="id" 
		  border 
		  stripe 
		  default-expand-all  
		  v-loading="loading">
		  <el-table-column
		    type="selection"
		    width="55">
		  </el-table-column>
		  <el-table-column prop="f_id" label="ID"  width="55"></el-table-column>
		  <el-table-column prop="urls" label="缩略图" >
			  <template slot-scope="scope">
			        <el-image 
			    style="width: 50px; height: 50px"
			    :src="imgURL+scope.row.urls" 
			    :preview-src-list="[imgURL+scope.row.urls]" v-if="scope.row.type==0">
			  </el-image>
			  <el-tag type="danger" :label="scope.row.ftype" effect="plain" size="small" v-if="scope.row.type==2">{{scope.row.ftype}}</el-tag>
			  <el-tag type="success" :label="scope.row.ftype" effect="plain" size="small" v-if="scope.row.type==1">{{scope.row.ftype}}</el-tag>
			       
			        
			      </template>
			  
		  </el-table-column>
		  <el-table-column prop="name" label="文件名称" >
			  <template slot-scope="scope">
			   {{   scope.row.name.substring(scope.row.name.lastIndexOf("\/")+1,scope.row.name.length)  }} 
			    
			               
			  </template>
			  
		  </el-table-column>
		  <el-table-column prop="ftype" label="文件类型" width="60"></el-table-column>
		  <el-table-column prop="oss" label="存储位置" >
			  <template slot-scope="scope">
				  <el-tag type="danger" :label="scope.row.oss" v-if="scope.row.oss==1" effect="plain" size="small">本地</el-tag>
			  </template>
		  </el-table-column>
		  <el-table-column prop="creat_time" label="上传时间" ></el-table-column>
		  <el-table-column prop="creat_by" label="上传者" ></el-table-column>
		  <el-table-column prop="name" label="操作" >
			  <template slot-scope="scope">
			  <PersButton type="success" size="mini" label="复制链接" icon="fa  fa-pencil" perms="node:edit" @click="copy(scope.row)"></PersButton>
			  <PersButton type="danger" size="mini" icon="el-icon-delete" perms="node:del" label="删除" @click="del(scope.row)"></PersButton>
		      </template>
		  </el-table-column>
		  </el-table>
		</div>
		  <div class="block">
		      
		      <el-pagination
		        @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page="pageNumber"
		        :page-sizes="[10, 50, 100, 200]"
		        :page-size="pageSize"
		        layout="total, sizes, prev, pager, next, jumper"
		        :total="total">
		      </el-pagination>
		    </div>
	</div>
</template>

<script>
	var _self;
	let uploads = process.env.VUE_APP_BASE_API;
	let imgUrl = process.env.VUE_APP_BASE_API_IMG;
	import Panle from '@/components/Panle'
	import PersButton from '@/components/PersButton'
	import {getToken} from '@/utils/token'
	import {listFiles} from '@/api/files/files'
	export default{
		components:{
			Panle,
			PersButton
		},
		data(){
			return{
				loading:false,
				pageSize:10, //一页显示多少条
				pageNumber:1,
				total:0,//总页数
				formInline:{},
				actions:uploads+"/uploads/index",
				uploadHeader:{token:getToken()},
				tableData:[],
				imgURL:imgUrl
			}
		},
		created() {
			_self = this;
			_self.init();
		},
		methods:{
			init:function(){
				_self.loading=true;
				let param={"pageSize":_self.pageSize,"pageNumber":_self.pageNumber,"keyWord":_self.keyWord,'type':3000}
				listFiles(param).then((res)=>{
					console.log(res);
					if(res.code==200){
						_self.tableData=res.data.list;
						_self.total = res.data.total;
						_self.loading=false;
					}
				})
			},
			handleSizeChange:function(e){
			    console.log(e);
			    _self.pageSize = e;
			    _self.init();
			},
			handleCurrentChange:function(e){
			    console.log(e);
			    _self.pageNumber=e;
			   _self.init();
			},
			uploadSuccess:function(res){
				console.log(res);
				if(res.code==200){
					_self.init();
					_self.msgSuccess(res.msg);
				}else{
					_self.msgError(res.msg);
				}
			},
			copy:function(data){
			   var oInput = document.createElement('input'); //创建一个隐藏input（重要！）
			oInput.value =_self.imgURL+data.urls;    //赋值
			document.body.appendChild(oInput);
			oInput.select(); // 选择对象
			document.execCommand("Copy"); // 执行浏览器复制命令
			oInput.className = 'oInput';
			oInput.style.display = 'none';
			_self.msgSuccess("复制成功")
			
			
			 }
		}
		
		}
</script>

<style>
	.pt20{
		padding-top: 10px;
	}
	.el-table{
		margin-top: 20px;
		
	}
	.el-table__header tr,
	  .el-table__header th {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.el-table__body tr,
	  .el-table__body td {
	    padding: 0 !important;
	    height: 40px;
	    font-size: 12px;
	    text-align: center;
	}
	.block{
	    padding: 10px;
	    text-align: left;
	}
	.upload-demo{float: left; margin-right: 5px;}
	.el-form-item{margin-bottom: 0;}
</style>
